<body class="main">
        <!-- child of the body tag -->
        <div class="top"></div>
        <div class="top-nav fixed">
            <div class="container">
                <a class="bp-main-top" href="<?php echo base_url(); ?>">BULLYPROOF</a>
                <div class="btn-group">
                  <button type="button" class="btn btn-default dropdown-toggle btn-bully-proof" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-chevron-down"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#main" class="scroller">Bullying</a></li>
                    <li><a href="#suicide" class="scroller">Suicide</a></li>
                    <li><a href="#hazing" class="scroller">Hazing</a></li>
                      <li><a href="#safebook" class="scroller">Safebook</a></li>
                       <li><a href="#bullying" class="scroller">10 Tips</a></li>
                      <li><a href="#parental" class="scroller">Parental</a></li>
                  </ul>
                </div>
                <div class="pull-right icons-right">
                    <a href="mailto:bullyproofph@gmail.com" target="_blank"><i class="ion ion-email"></i></a>
                    <a href="http://www.facebook.com/bullyproofph" target="_blank"><i class="ion ion-social-facebook"></i></a>
                    <a href="http://www.twitter.com/bullyproofph" target="_blank"><i class="ion ion-social-twitter"></i></a>
                </div>
            </div>
        </div>
        <div id="main" class="section section-infographic">
            <div class="row row-centered">
                <div class="col-md-12 col-centered">
                    <img class="info-image" src="<?php echo $img_dir; ?>infographic/bullying_infographic.jpg" />
                </div>
                Source: <a href="http://www.headspace.org.au/bullying">headspace.org.au/bullying</a>
            </div>
            <div class="main-button" style="margin-top:5rem;">
                <a href="<?php echo base_url(); ?>" class="btn btn-clear">&laquo; BULLYPROOF</a>
                <a href="#suicide" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-down"></span></a>
            </div>
            
        </div>
        <div id="suicide" class="section section-infographic">
            <div class="row row-centered">
            <div class="col-md-12 col-centered">
                <img class="info-image" src="<?php echo $img_dir; ?>infographic/suicide_infographic.jpg" />
            </div>
            Source: <a href="http://www.headspace.org.au/bullying">headspace.org.au/bullying</a>
            </div>
            <div class="main-button" style="margin-top:5rem;">
                <a href="#main" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-up"></span></a>
                <a href="#hazing" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-down"></span></a>
            </div>
            
        </div>
        
        <div id="hazing" class="section section-infographic">
            <div class="row row-centered">
            <div class="col-md-12 col-centered">
                <img class="info-image" src="<?php echo $img_dir; ?>infographic/hazing_infographic.jpg" />
            </div>
            Source: <a href="http://www.headspace.org.au/bullying">headspace.org.au/bullying</a>
            </div>
            <div class="main-button" style="margin-top:5rem;">
                <a href="#suicide" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-up"></span></a>
                <a href="#safebook" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-down"></span></a>
            </div>
            
        </div>
        <div id="safebook" class="section section-infographic">
            <div class="row row-centered">
            <div class="col-md-12 col-centered">
                <img class="info-image" src="<?php echo $img_dir; ?>infographic/safebook_infographic.jpg" />
            </div>
            Source: <a href="http://www.headspace.org.au/bullying">headspace.org.au/bullying</a>
            </div>
            <div class="main-button" style="margin-top:5rem;">
                <a href="#hazing" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-up"></span></a>
                <a href="#bullying" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-down"></span></a>
            </div>
        </div>
         <div id="bullying" class="section section-infographic">
            <div class="row row-centered">
            <div class="col-md-12 col-centered">
                <img class="info-image" src="<?php echo $img_dir; ?>infographic/10tips_infographic.jpg" />
            </div>
            Source: <a href="http://www.headspace.org.au/bullying">headspace.org.au/bullying</a>
            </div>
            <div class="main-button" style="margin-top:5rem;">
                <a href="#safebook" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-up"></span></a>
                <a href="#parental" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-down"></span></a>
            </div>
            
        </div>
        <div id="parental" class="section section-infographic">
            <div class="row row-centered">
            <div class="col-md-12 col-centered">
                <img class="info-image" src="<?php echo $img_dir; ?>infographic/parental_infographic.jpg" />
            </div>
            Source: <a href="http://www.headspace.org.au/bullying">headspace.org.au/bullying</a>
            </div>
            <div class="main-button" style="margin-top:5rem;">
                <a href="#bullying" class="btn btn-clear scroller"><span class="glyphicon glyphicon-chevron-up"></span></a>
            </div>
            
        </div>
        
       
        
        
        
        <a href="#" style="right: 70px; display: inline;" class="btn back-to-top btn-dark btn-fixed-bottom">Top <span class="glyphicon glyphicon-chevron-up"></span> </a>
</div>